<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="css/index.css"/>


    <title>Counter</title>
    <style>
        #app{
        
            background-color: rgb(132, 139, 139); 
            position: absolute;
            left: 50%;
            top: 30%;
            margin: -50px 0 0 -50px;
        }
       .content {
        display: flex;
        width: 220px;
        height: 90px;
        background-color: rgb(132, 139, 139); 
        flex-direction: row;
        justify-content: space-around;
        flex-wrap: wrap;
       

        }
        .item{
        width: 40px;
        height: 40px;
        background-color: rgb(113, 184, 224);
        border: 2px solid black;
        }
        .cin_item{
            width: 213px;
        }

    </style>
</head>
<body>
    
    <div id="app">
        <div>
            <input type="text" v-model:value="counter" class="cin-item">
        </div>
        <div class="content">
                <div class="item" @click="counter+=0">0</div>
                <div class="item" @click="counter+=1">1</div>
                <div class="item" @click="counter+=2">2</div>
                <div class="item" @click="counter+=3">3</div>
                <div class="item" @click="counter+=4">4</div>
                <div class="item" @click="counter+=5">5</div>
                <div class="item" @click="counter+=6">6</div>
                <div class="item" @click="counter+=7">7</div>
                <div class="item" @click="counter+=8">8</div>
                <div class="item" @click="counter+=9">9</div>
        </div>




    </div>
    
</body>
<script src="http://unpkg.com/vue@next"></script>
    <script>
        const Counter={
            data(){
                return{
                    counter:0
                }
            }
        }
        Vue.createApp(Counter).mount('app')
    </script>
</html>